<template>
  <view>
    <view class="subject-content">
      <view v-for="(item,index) in subjectList" :key="index" class="subject-item">
        <view class="sub-title">
          <text>{{ item.name }}</text>
          <!-- <image src="https://szgd-dev.tgovcloud.com/public/images/infectPrevention/icon2.png" class="icon-unfinish" /> -->
        </view>
        <view v-for="(t,i) in item.children" :key="i" class="flex-box">
          <view v-if="t.workText" class="form-title">{{ t.workText }}</view>
          <view class="form-ext">
            {{ projects[t.projectId] || '' }}
          </view>
        </view>
      </view>
      <!-- 图片 -->
      <!-- <view class="sub-title">现场图片</view>
      <view class="unload-item">
        <view class="upload-btn mg-right"  v-for="item in imgList" :key="item">
          <image class="full-img"  :src="item.filePath" mode="aspectFit" @click="preview(item.filePath)"></image>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import { getData, getSupervisionQuestion } from '@/api';
import { downloadFile } from "@/request/request";

export default {
  data() {
    return {
      question: [],
      subjectList: [],
      projects: {},
      formData: {},
      imgList: [],
      supervisionId: ''
    }
  },
  onLoad(options) {
    this.supervisionId = options.id;
    this.getQuestionList();
    if (this.supervisionId) {
      this.getDetail(this.supervisionId);
    }
  },
  methods: {
    getDetail(id) {
      uni.showLoading();
      getData('getSupervision','GET',{ supervisionId: id }).then(res => {
        this.formData = res;
        let question = res.supervisionRelationProjects || [];
        this.projects = {};
        question.forEach(t => {
          this.projects[t.projectId] = t.text;
        })
        uni.hideLoading();
      })
    },
    // 查询题库
    getQuestionList() {
      uni.showLoading();
      getSupervisionQuestion().then(res => {
        let data = res || [];
        this.question = JSON.parse(JSON.stringify(data));
        let subject = {};
        this.question.forEach(t => {
          if (!subject[t.projectCore]) {
            subject[t.projectCore] = {
              name: t.name,
              projectCore: t.projectCore,
              children: []
            }
          }
          subject[t.projectCore].children.push(t);
        })
        for(let key in subject) {
          this.subjectList.push(subject[key]);
        }
        console.log(this.subjectList)
        uni.hideLoading();
      })
    },
    // 文件下载
    downloadFile(row) {
      let filePath = `${this.rootPath}/${row.fileName}`;
      const _this = this;
      wx.getFileInfo({
        filePath,
        success(res) {
          _this.$set(_this.isFileSave, row.fileId, row.filePath);
        },
        fail(err) {
          downloadFile({ url: '/files/book-download?fileId=' + row.fileId }).then(data => {
            console.log('file', data)
            const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
            fs.writeFile({ // 写文件
              filePath,
              data: data,
              encoding: "binary", //二进制流文件必须是 binary
              success(res){
                console.log('write success')
                _this.$set(_this.isFileSave, row.fileId, row.filePath);
              },
              fail(err) {
                console.log(err)
              }
            });
          })
        }
      })
    },
    preview(urls = [], current){
      uni.previewImage({
        urls,
        current,
        fail() {
          uni.showToast('打开图片失败！')
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.block-title {
  font-size: 40rpx;
  color: #000000;
  font-weight: 600;
  border-top: 30rpx solid #f9f9f9;
  border-bottom: 1px solid #f9f9f9;
  padding: 30rpx 40rpx;
  box-sizing: border-box;
}
.sub-title {
  font-size: 30rpx;
  padding: 20rpx 40rpx;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
.icon-unfinish {
  width: 30rpx;
  height: 30rpx;
}
.subject-content {
  font-size: 30rpx;
  .block-title {
    border-top: none;
  }
  .title {
    text-align: center;
    font-size: 40rpx;
    color: #000000;
    font-weight: 600;
    padding: 30rpx 40rpx;
    background-color: #f9f9f9;
  }
  .subject-item {
    background-color: #fff;
    border-bottom: 30rpx solid #f9f9f9;
  }
  .form-title {
    font-size: 32rpx;
    color: #666;
  }
  .form-ext {
    margin-top: 30rpx;
    color: #13C563;
    word-break: break-word;
  }
  .textarea {
    padding: 10rpx 0;
    color: #ccc;
  }
}
.flex-box {
  padding: 20rpx 30rpx;
}
.unload-item{
  padding: 32rpx 0;
  display: flex;
  // justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  .upload-btn{
    width: 209rpx;
    height: 209rpx;
    background: rgba(227, 239, 253, 1);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 30rpx 30rpx 0;
    .close{
      position: absolute;
      right: -10rpx;
      top: -25rpx;
      height: 36prx;
      width: 36rpx;
      border-radius: 50%;
      overflow: hidden;
      .close-img{
        width: 100%;
        height: 100%;
        z-index: 10;
      }
    }
    .full-img{
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
    .middle-img{
      width: 48rpx;
      height: 48rpx;
    }
    &:nth-child(3n){
      margin:0 0 30rpx 0;
    }
  }
}
</style>